<template>
	<view class="video-box" >
		<video :ref="`playVideoRef-${key}`" class="video" :id="key" :autoplay="false" :src="src"
			preload="meta" :muted="muted" :show-loading="true"
			:enable-progress-gesture="controls" :controls="controls" :show-center-play-btn="showPlayBtn" :play-strategy="2"
			:key="key" @waiting="onWaiting" @play="onPlay" @pause="onPause" @ended="onEnded" @error="onError"
			@fullscreenchange="onFullscreenchange" @tap.stop="change" v-if="is_reload"
			:show-fullscreen-btn="true" :show-play-btn="showPlayBtn">
		</video>
		<image :src="imgUrl" v-if="!is_reload" @load="handleImageLoad" @error="handleImageLoad" mode="aspectFill"></image>
		<view class="play" @click="btnplay" v-if="!is_play && is_show">
			<uni-icons custom-prefix="iconfont" type="icon-bofang" size="20" color="rgba(255,255,255,1)" style="transform: translateX(4rpx);"></uni-icons>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			imgUrl: {
				type: String,
				default: () => ''
			},
			src: {
				type: String,
				default: () => ''
			},
			uniqueKey: {
				type: String,
				default: () => {}
			}
		},
		data() {
			return {
				key: '',
				videoContext: null,
				muted: false,
				isZan: false,
				isSc: false,
				controls: true,
				isFullscreen: false,
				showPlayBtn: false,
				is_reload: false,  //
				is_play: false,
				is_show: false
			}
		},
		created() {
			if(this.$props.uniqueKey) {
				this.key = this.$props.uniqueKey
			} else {
				this.key = this.generateUniqueId()
			}
		},
		mounted() {
			//this.videoContext = uni.createVideoContext(`myVideo-` + this.key, this)
			console.log('this.videoContext', this.videoContext)
		},
		methods:{
		
			handleImageLoad(e) {
				console.log('e', e)
				if(e.type != 'error') {
					this.is_show = true
				} else {
					this.is_show = false
				}
			},
			generateUniqueId() {
				return Date.now().toString(36) + Math.random().toString(36).substr(2, 5);
		    },
			change() {
				if (!this.isFullscreen) {
					this.is_play ? this.pause() : this.play()
				}
			},
			btnplay(){
				this.$emit('btnplay',true)
				this.play()
			},
			onWaiting() {
				this.loading = true
			},
			play() {
		
				//是否第一次
				if(!this.is_reload) {
					//第一次
					this.is_reload = true
					this.is_play = true
					this.$nextTick(()=>{
						this.videoContext = uni.createVideoContext(this.key, this)
						this.videoContext.play()
						this.$emit('play')
					})
				} else {
					this.is_play = true
					this.videoContext.play()
					this.$emit('play')
				}
			},
			pause() {
				this.$emit('btnplay',false)
				this.videoContext.pause()
			},
			pause2() {
				this.videoContext.pause()
			},
			fullScreen() {
				this.videoContext.requestFullScreen()
			},
			onFullscreenchange(e) {
				this.isFullscreen = e.detail.fullScreen
				//this.controls = e.detail.fullScreen
				this.showPlayBtn = e.detail.fullScreen
			},
			onEnded() {
				
				this.currentTime = 0
				this.videoContext.exitFullScreen()
				this.$emit('ended')
				setTimeout(() => {
					this.key = new Date().getTime()
				}, 150)
			},
			onError() {
				console.log("onError");
				if (this.current == this.index) {
					uni.showToast({duration:3000,
						title: '播放失败',
						duration: 1000,
						icon: 'none'
					})
					setTimeout(() => {
						this.key = new Date().getTime()
						this.onEnded()
					}, 1000)
				}
			},
			onPlay() {
				if (this.current != this.index) {
					this.videoContext.pause()
					this.is_play = false
				} else {
					this.is_play = true
					
					this.loading = false
				}
			},
			onPause() {
				this.is_play = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.video-box {
		width: 100%;
		height: 100%;
		position: relative;
		video {
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
		}
		image {
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
			
		}
		.play {
			width: 130rpx;
			height: 130rpx;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
			z-index: 2;
			background: rgba(0,0,0,0.5);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>